<template>
	<view class="content">
		<!-- 筛选 -->
		<view class="filtrate-list flex bg-white">
			<wuc-tab :tab-list="worksType" textFlex :tabCur.sync="TabCur" tab-class="text-center padding-bottom-xs" tabStyle="color: #000000;"
			 select-class="text-bold"></wuc-tab>
		</view>
		<!-- 占位 -->
		<view class="perch"></view>
		<swiper :current="TabCur" class="swiper row" duration="300" :circular="false" @change="swiperChange">
			<swiper-item v-for="(item,index) in worksType" :key="index">
				<scroll-view class="panel-scroll-box " :scroll-y="true" @scrolltolower="getworksList">
					<view class="works-list">
						<view class="list">
							<view class="onworks" v-if="item.worksList.length <= 0">
								<image src="/static/images/maotouying.png"></image>
								<!-- <view class="text">
									没有相关素材~
								</view> -->
							</view>
							<view class="works-list" v-if="item.worksList.length > 0">
								<view class="list-item" v-for="(item1,index) in item.worksList" :key="index" @tap="goDetail(index)">
									<image class="main-img" :src="item1.Sp_material.backImage"></image>
									<view class="flex align-center justify-between margin-tb-xs">
										<text class="item-tilte">{{item1.Sp_material.name}}</text>
										<image class="icon-img" src="/static/tabBar/category_selected.png"></image>
									</view>
									<view class="flex align-center justify-between text-gray">
										<text class="">{{item1.Sp_material.create_time}}</text>
										<text class="">荐</text>
									</view>
								</view>
							</view>
							<nomore :visible="true" :text="item.worksListMode?'上拉加载更多':'没有更多作品'"></nomore>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import wucTab from '@/components/wuc-tab/wuc-tab.vue'
	import nomore from '@/components/nomore/nomore.vue'
	export default {
		comments:{
			wucTab,
			nomore
		},
		data() {
			return {
				TabCur: 0,
				worksType: [{
					name: '已通过',
					status:0, //类型区分
					worksList: [], //列表数据
					page: 1, //页数
					pageSize: 15, //每页条数
					worksListMode: true //是否还有更多
				}, {
					name: '未通过',
					status:1,
					worksList: [],
					page: 1,
					pageSize: 15,
					worksListMode: true
				}, {
					name: '待处理',
					status:2,
					worksList: [],
					page: 1,
					pageSize: 15,
					worksListMode: true
				}, {
					name: '被投诉',
					status:3,
					worksList: [],
					page: 1,
					pageSize: 15,
					worksListMode: true
				}, {
					name: '延申',
					status:4,
					worksList: [],
					page: 1,
					pageSize: 15,
					worksListMode: true
				}, {
					name: '待修改',
					status:5,
					worksList: [],
					page: 1,
					pageSize: 15,
					worksListMode: true
				}],
				findOrderParam:{
					page: 1,
					pageSize: 10,
					status:0 //订单状态（0：已通过；1：未通过；2：待处理；3：被投诉；4：延申；5：待修改）
				},
			};
		},
		onLoad() {
			this.text(); //测试案例
		},
		methods:{
			goDetail(index){
				uni.navigateTo({
					url: `../detail/detail?id=${this.worksType[0].worksList[index].Sp_material.id}`
				})
			},
			async text(){ //测试案例
				let param = {
					url:'https://pic.vjshi.com/2020-07-11/8eaa1a14bf9b0a37c72b2a0b69656f5c/online/main.jpg?x-oss-process=style/resize_w_285',
					title: '测试测试测试测试测试测试测试测试测试测试',
					time:2
				};
				
				let data = await this.$httpApi.query({
					"[]": {
						"Sp_material": {
							create_user : this.$store.state.user.id
						}
					}
				});
				
				//  data['[]']   等价于  data.[]   // [] 是特殊字符报错必须用这种形式。
				// this.userArray = data['[]'] ; 
				this.worksType[0].worksList = data['[]'];
				// this.worksType[0].worksList.concat(data['[]']);
				console.log(data,data['[]'],this.worksType[0].worksList)
				// for(let i=0;i<5;i++){
				// 	this.worksType[0].worksList.push(param);
				// 	this.worksType[1].worksList.push(param);
				// 	this.worksType[3].worksList.push(param);
				// }
				this.worksType[0].worksListMode = false;
			},
			getworksList(){ //上拉加载
				let that = this;
				if(!this.orderType[this.TabCur].orderListMode) return;
				this.findOrderParam.page = this.orderType[this.TabCur].page;
				this.findOrderParam.status = this.orderType[this.TabCur].status;
				uni.showLoading({
					title: '努力加载中...',
					mask: true
				});
				//相关请求
				uni.hideLoading();
			},
			swiperChange(e) { //轮播切换
				let {
					current
				} = e.target;
				this.TabCur = current;
				let typeData = this.worksType[this.TabCur];
				if(typeData.worksListMode && typeData.worksList.length <= 0){
					// this.getworksList();
				}
			},
		}
	}
</script>

<style lang="scss">
	page,
	.content,
	.panel-scroll-box {
		height: 100%;
	}
	uni-swiper,
	.swiper
	{
		height: 91%;
	}
	.perch{
		height: 100upx;
	}
	.filtrate-list {
		background: #FFFFFF;
		width: 100%;
		position: fixed;
		z-index: 100;
		overflow: scroll;
	}
	.works-list {
		margin-top: 10upx;
		width: 100%;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		.list {
			width: 97%;
			margin: 0 auto;
			.onworks {
				width: 100%;
				height: 80vw;
				display: flex;
				justify-content: center;
				align-content: center;
				flex-wrap: wrap;
				image {
					margin-top: 100upx;
					width: 70%;
				}
				// .text {
				// 	width: 100%;
				// 	height: 60upx;
				// 	font-size: 28upx;
				// 	color: #bbb;
				// 	display: flex;
				// 	justify-content: center;
				// 	align-items: center;
				// }
			}
		}
		.list-item{
			width: 49%;
			overflow: hidden;
			margin-bottom: 20upx;
			.main-img{
				width: 100%;
				height: 450upx;
			}
			.item-tilte{
				width: 100%;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				text-align: justify;
				overflow: hidden;
			}
			.icon-img{
				width: 30upx;
				height: 30upx;
			}
		}
	}
</style>
